<script setup lang="ts">
  import { userStore, listStore } from '@/stores'
  import { onShow } from '@dcloudio/uni-app'
  import { updateUser, logoutAPI } from '@/api/common/login'
  import { ref, computed } from 'vue'
  import { appConfig } from '@/config'
  import { noticeUnnums } from '@/api/home/index'
  import { clearDict } from '@/hooks/useDict'
  import { packagedSetUrlQuery } from '@/utils/upload-tool'

  // #ifdef APP-PLUS
  import { update } from '@/utils/updateVersion.js'
  // #endif
  import ToBgmWxapp from '@/components/to-bgm-wxapp.vue'

  // 获取会员信息
  const userInfo = ref(null)
  const user : any = ref(null)
  const userInfoStore = userStore()
  const useListStore = listStore()
  const appVersion = ref(null)
  const appEnv = ref(null)
  const noticeNum = ref(0)
  const updateUserInfo = async () => {
    const res = await updateUser()
    user.value = res.result
  }
  const toNoticeList = () => {
    uni.navigateTo({
      url: '/pages/info/list',
    })
  }
  onShow(() => {
    appEnv.value = getApp().globalData.env
    // appVersion.value = uni.getSystemInfoSync().appVersion
    // #ifdef APP-PLUS
    plus.runtime.getProperty(plus.runtime.appid, function (info) {
      appVersion.value = info.version //本地版本
    })
    // #endif
    userInfo.value = userInfoStore.profile
    if (!userInfo.value) {
      uni.reLaunch({ url: '/pages/login/login' })
    } else {
      // 更新用户信息
      updateUserInfo()
      // 消息数量
      noticeUnnums().then((res) => {
        noticeNum.value = Number(res.result.type1 ? res.result.type1 : 0) + Number(res.result.type2 ? res.result.type2 : 0)
      })
    }
  })
  const onLogout = () => {
    // 模态弹窗
    uni.showModal({
      content: '是否退出登录？',
      confirmColor: '#3072F6',
      success: (res) => {
        if (res.confirm) {
          logoutAPI().then((res) => {
            userInfoStore.clearProfile()
            useListStore.clear()
            clearDict()
            uni.showToast({ icon: 'none', title: '已退出' })
            uni.reLaunch({ url: '/pages/login/login' })
          })
        }
      },
    })
  }
  const toMore = () => {
    uni.navigateTo({
      url: './more',
    })
  }
  const toPushLog = () => {
    uni.navigateTo({
      url: '/pages/my/log',
    })
  }

  // logo 显示
  const logoSrc = computed(() => {
    // const userVal = user.value
    // if (userVal && userVal.epLogoMini) {
    //   return packagedSetUrlQuery(userVal.epLogoMini)
    // }
    return '../../static/images/login-logo1.png'
  })
</script>

<template>
  <view class="viewer">
    <view class="user" v-if="user">
      <image class="avater" :src="logoSrc" />
      <view class="fs36 fw600 user-i">{{ user.epName }}</view>
      <view class="fs32 user-i">
        <view class="user-card" style="margin-right: 48rpx">
          <image src="../../static/icons/icon-user-member.png" />
          <span>{{ user.realname }}</span>
        </view>
        <view class="user-card">
          <image src="../../static/icons/icon-user-phone.png" />
          <span>{{ user.phone }}</span>
        </view>
      </view>
      <view class="fs32 user-i">
        <view class="user-card">
          <image src="../../static/icons/icon-user-card.png" />
          <span v-for="(i, index) in [user.staffPostName]" :key="i.id">{{ i }}
            <!-- <span style="margin-right: 16rpx" v-if="index != user.staffPostName.length - 1">|</span> -->
          </span>
        </view>
      </view>
    </view>
    <view class="card-button">
      <image class="c-icon" src="../../static/icons/icon-update.png" />
      <span class="c-title">版本</span>
      <span class="c-content">v{{ appVersion }}</span>
    </view>
    <view class="card-button" @click="toNoticeList">
      <image class="c-icon" src="../../static/icons/icon_notice.png" />
      <span class="c-title">消息中心</span>
      <span class="c-notice fs28 fw400" v-if="noticeNum > 0">{{ noticeNum }}条新消息</span>
      <span class="fs32 fw400 c2" v-else>暂无新消息</span>
    </view>
    <view class="card-button" @click="toMore">
      <image class="c-icon" src="../../static/icons/more-icon.png" />
      <span class="c-title">查看更多</span>
      <span class="c-tip"></span>
      <image style="width: 12rpx; height: 16rpx" src="../../static/icons/icon-more.png" mode="widthFix" />
    </view>
    <!-- 非正式发布信息 -->
    <template v-if="appEnv != 'prod'">
      <view class="card-button" @click="toPushLog">
        <span class="c-title">环境/版本/发布次数</span>
        <span class="c-content"> {{ appEnv }}/{{ appConfig.version }}/p1</span>
      </view>
    </template>
    <!-- 跳转小程序 -->
    <ToBgmWxapp />
    <view @tap="onLogout" class="user-out">退出登录</view>
  </view>
</template>

<style lang="scss">
  page {
    background-color: #f7f8fa;
  }

  .viewer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
    padding-bottom: 200rpx;
  }

  .f-w-600 {
    font-weight: 600;
  }

  .f-s-36 {
    font-size: 36rpx;
  }

  .f-s-32 {
    font-size: 32rpx;
  }

  .user {
    color: #fff;
    width: 100%;
    height: 500rpx;
    background-image: linear-gradient(to bottom, #4166ff 0%, #3072f6 100%);
    background-image: url(@/static/images/user-bg.png);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    .user-i {
      margin-bottom: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .user-card {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 16rpx;
        }
      }
    }

    .avater {
      margin-bottom: 24rpx;
      width: 144rpx;
      height: 144rpx;
      // background: #f7f7f8;
      border-radius: 50%;
    }
  }

  .card-button {
    margin-top: 24rpx;
    width: calc(100% - 48rpx);
    height: 140rpx;
    background-color: #ffffff;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;

    &.mt-0 {
      margin-top: 0;
      border-top: 1px #f7f8fa solid;
    }

    .c-icon {
      width: 64rpx;
      height: 64rpx;
      margin-right: 16rpx;
    }

    .c-title {
      color: #191c27;
      flex: 1;
      font-size: 32rpx;
    }

    .c-tip {
      font-size: 28rpx;
      background: #3072f6;
      color: #fff;
      padding: 0 24rpx;
      // padding: 4rpx 24rpx;
      border-radius: 4rpx;
    }

    .c-notice {
      padding: 8rpx 16rpx;
      background-color: #f9654e;
      color: #ffffff;
      border-radius: 50rpx;
    }

    .c-content {
      font-size: 32rpx;
      font-size: 32rpx;
      margin-left: 16rpx;
    }
  }

  .user-out {
    width: calc(100% - 64rpx);
    height: 88rpx;
    border-radius: 4rpx;
    text-align: center;
    line-height: 88rpx;
    color: #ffffff;
    background: #3072f6;
    margin-top: 32rpx;
  }
</style>
